<!DOCTYPE html>
<html lang="zh-CN" class="io-grey-mode">
<head>
    <script>
        const default_c = "io-grey-mode";
        const night = document.cookie.replace(/(?:(?:^|.*;\s*)io_night_mode\s*\=\s*([^;]*).*$)|^.*$/, "$1");
        try {
            if (night === "0" || (!night && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
                document.documentElement.classList.add("io-black-mode");
                document.documentElement.classList.remove(default_c);
            } else {
                document.documentElement.classList.remove("io-black-mode");
                document.documentElement.classList.add(default_c);
            }
        } catch (_) {
        }
    </script>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>[[${SITE_CONFIG?.SITE_NAME}]]</title>
    <meta name="theme-color" content="#f9f9f9"/>
    <meta name="keywords" th:content="${SITE_CONFIG?.SITE_KWD}"/>
    <meta name="description" th:content="${SITE_CONFIG?.SITE_DESC}"/>
    <meta property="og:type" content="website">
    <meta property="og:url" content="/"/>
    <meta property="og:title" th:content="${SITE_CONFIG?.SITE_NAME}">
    <meta property="og:description" th:content="${SITE_CONFIG?.SITE_DESC}">
    <meta property="og:image" content="/favicon.ico">
    <meta property="og:site_name" th:content="${SITE_CONFIG?.SITE_NAME}">
    <meta name='robots' content='max-image-preview:large'/>
    <link rel='stylesheet' id='iconfont-css' href='/web/css/iconfont.min.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='bootstrap-css' href='/web/css/bootstrap.min.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='swiper-css' href='/web/css/swiper-bundle.min.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='style-css' href='/web/css/style.min.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='chatgpt-css' href='/web/css/chatgpt.min.css' type='text/css' media='all'/>
    <script type='text/javascript' src='/web/js/jquery.min.js' id='jquery-js'></script>
    <script type='text/javascript' id='jquery-js-after'>
        /* <![CDATA[ */
        function loadFunc(func) {
            if (document.all) {
                window.attachEvent("onload", func);
            } else {
                window.addEventListener("load", func, false);
            }
        }
        /* ]]> */
    </script>
    <style>.navbar-nav .menu-item-286 a {
        background: #ff8116;
        border-radius: 50px !important;
        padding: 5px 10px !important;
        margin: 5px 0 !important;
        color: #fff !important;
    }

    .navbar-nav .menu-item-286 a i {
        position: absolute;
        top: 0;
        right: -10px;
        color: #f13522;
    }

    .io-black-mode .navbar-nav .menu-item-286 a {
        background: #ce9412;
    }

    .io-black-mode .navbar-nav .menu-item-286 a i {
        color: #fff;
    }

    @media (min-width: 768px) {
        .main-content {
            margin-left: 220px;
        }

    }</style>
</head>
<body class="home blog">
<div class="content flex-fill" style="height: 100%">
    <nav th:replace="web/module/navbar_full"></nav>
    <div id="content" class="container" style="height: 85%">
        <div class="chat-main" style="width:100%">
            <div class="window-header">
                <div class="window-header-title">
                    <div class="name">
                        <div id="chat-share-title" class="window-header-main-title home_chat-body-title__5S8w4">
                        </div>
                    </div>
                </div>
            </div>
            <div class="message-content" id="chat-content">
            </div>
            <div class="chat-input" style="display: flex;justify-content: center;align-items: center;">
                <button id="send-btn" onclick="window.location.href='/chatai';" style="right: auto;width: 200px;height:48px;">
                    <div class="button_icon-button-text__k3vob" style="font-size: 24px;">前往泰聪明AI</div>
                </button>
            </div>
        </div>
    </div>
</div>
<footer th:replace="web/module/footer"></footer>
<script type='text/javascript' src='/web/js/marked.min.js' id='marked-js'></script>
<script type='text/javascript' src='/web/js/popper.min.js' id='popper-js'></script>
<script type='text/javascript' src='/web/js/bootstrap.min.js' id='bootstrap-js'></script>
<script type='text/javascript' src='/web/js/theia-sticky-sidebar.min.js' id='sidebar-js'></script>
<script type='text/javascript' src='/web/js/lazyload.min.js' id='lazyload-js'></script>
<script type='text/javascript' src='/web/js/highlight.min.js' id='highlight-js'></script>
<script type='text/javascript' src="/web/js/clipboard.min.js"></script>
<script type='text/javascript' id='appjs-js-extra'>
    const theme = {
        "formpostion": "top",
        "defaultclass": "io-grey-mode",
        "isCustomize": "1",
        "urlformat": "1",
        "customizemax": "10",
        "newWindow": "0",
        "lazyload": "1",
        "minNav": "0",
        "loading": "0",
        "hotWords": "baidu",
        "classColumns": " col-2a col-sm-2a col-md-2a col-lg-3a col-xl-5a col-xxl-6a ",
        "isHome": ""
    };
    const localize = {
        "lightMode": "\u65e5\u95f4\u6a21\u5f0f",
        "nightMode": "\u591c\u95f4\u6a21\u5f0f"
    };
</script>
<script type='text/javascript' src='/web/js/app.js'></script>
<script type='text/javascript' id='appjs-js-after'>
    $(document).ready(function () {
        if ($("#search-text")[0]) {
            $("#search-text").focus();
        }
    });
</script>
<script th:inline="javascript">
    const chatContent = $("#chat-content");
    const chatUid = [[${chatUid}]];
    $(function () {
        chatHistory(chatUid);
    });
    function chatHistory(chatUid) {
        fetch('/chat/'+chatUid) // 替换为你要请求的URL
            .then(response => {
                // 检查响应状态码是否为200
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json(); // 将响应解析为JSON
            })
            .then(data => {
                $("#chat-share-title").html(data.username+" 分享的对话内容:");
                // 把 home_chat-message-actions__loading 的元素移除，不再显示 loading
                $(".home_chat-message-actions__loading").remove();
                addClientMsg(data.question, false);
                appendServerMsg(data);
            })
            .catch(error => {
                console.error('There has been a problem with your fetch operation:', error);
            });
    }


    function markedHtml(markdownText) {
        return  marked.parse(markdownText);
    }

    // 添加服务器端消息
    function appendServerMsg(answer) {
        const time = answer.answerTime;
        const chatId = answer.chatUid;
        let serverMsg = `
            <div class="home_chat-message__rdH_g server-msg">
                <div class="home_chat-message-container__plj_e">
                    <div class="home_chat-message-avatar__611lI">
                        <div class="no-dark">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" fill="none">
                                <defs><path id="bot_svg__a" d="M0 0h30v30H0z"></path><path id="bot_svg__c" d="M0 0h20.455v20.455H0z"></path></defs><g><rect fill="var(--pai-bg-normal-1)" width="30" height="30" rx="10"></rect><mask id="bot_svg__b" fill="#fff"><use xlink:href="#bot_svg__a"></use></mask><g mask="url(#bot_svg__b)"><g transform="translate(4.773 4.773)"><mask id="bot_svg__d" fill="#fff"><use xlink:href="#bot_svg__c"></use></mask><g mask="url(#bot_svg__d)"><path fill-rule="evenodd" d="M19.11 8.37c.17-.52.26-1.06.26-1.61 0-.9-.24-1.79-.71-2.57a5.24 5.24 0 0 0-4.53-2.59c-.37 0-.73.04-1.09.11A5.201 5.201 0 0 0 9.17 0h-.04C6.86 0 4.86 1.44 4.16 3.57A5.11 5.11 0 0 0 .71 6.04C.24 6.83 0 7.72 0 8.63c0 1.27.48 2.51 1.35 3.45-.18.52-.27 1.07-.27 1.61 0 .91.25 1.8.71 2.58 1.13 1.94 3.41 2.94 5.63 2.47a5.18 5.18 0 0 0 3.86 1.71h.05c2.26 0 4.27-1.44 4.97-3.57a5.132 5.132 0 0 0 3.45-2.47c.46-.78.7-1.67.7-2.58 0-1.28-.48-2.51-1.34-3.46ZM8.947 18.158c-.04.03-.08.05-.12.07.7.58 1.57.89 2.48.89h.01c2.14 0 3.88-1.72 3.88-3.83v-4.76c0-.02-.02-.04-.04-.05l-1.74-.99v5.75c0 .23-.13.45-.34.57l-4.13 2.35Zm-.67-1.153 4.17-2.38c.02-.01.03-.03.03-.05v-1.99l-5.04 2.87c-.21.12-.47.12-.68 0l-4.13-2.35c-.04-.02-.09-.06-.12-.07-.04.21-.06.43-.06.65 0 .67.18 1.33.52 1.92v-.01c.7 1.19 1.98 1.92 3.37 1.92.68 0 1.35-.18 1.94-.51ZM3.903 5.168v-.14c-.85.31-1.57.9-2.02 1.68a3.78 3.78 0 0 0-.52 1.91c0 1.37.74 2.64 1.94 3.33l4.17 2.37c.02.01.04.01.06 0l1.75-1-5.04-2.87a.64.64 0 0 1-.34-.57v-4.71Zm13.253 3.337-4.18-2.38c-.02 0-.04 0-.06.01l-1.74.99 5.04 2.87c.21.12.34.34.34.58v4.85c1.52-.56 2.54-1.99 2.54-3.6 0-1.37-.74-2.63-1.94-3.32ZM8.014 5.83c-.02.01-.03.03-.03.05v1.99L13.024 5a.692.692 0 0 1 .68 0l4.13 2.35c.04.02.08.05.12.07.03-.21.05-.43.05-.65 0-2.11-1.74-3.83-3.88-3.83-.68 0-1.35.18-1.94.51l-4.17 2.38Zm1.133-4.492c-2.15 0-3.89 1.72-3.89 3.83v4.76c0 .02.02.03.03.04l1.75 1v-5.75c0-.23.13-.45.34-.57l4.13-2.35c.04-.03.09-.06.12-.07-.7-.58-1.58-.89-2.48-.89ZM7.983 11.51l2.24 1.27 2.25-1.27V8.95l-2.25-1.28-2.24 1.28v2.56Z" style="fill: var(--pai-brand-1-normal);"></path></g></g></g></g>
                            </svg>
                        </div>
                    </div>
                    <div class="home_chat-message-item__hDEOq">
                        <div id="${chatId}" class="markdown-body">
                        </div>
                    </div>
                    <div class="home_chat-message-actions__nrHd1">
                        <div class="home_chat-message-action-date__6ToUp">${time}</div>
                    </div>
                </div>
            </div>
            `;
        chatContent.append(serverMsg);
        let answerDiv = $(`#${chatId}`);
        let content = markedHtml(answer.answer);
        answerDiv.html(content);
         // 高亮代码
        answerDiv.find('pre code').each(function (i, block) {
             hljs.highlightBlock(block);
         });
    }

    // 添加用户端消息
    function addClientMsg(messageContent, showLoading) {
        const avatarUrl = 'https://i2.wp.com/gravatar.loli.net/avatar/?ssl=1';
        let loadingDiv = `
        <div class="home_chat-message-actions__loading">
            <div class="home_chat-message-action-loading__6ToUp">
                <div class="lds-ellipsis">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    `;

        let userMsg = `
        <div class="home_chat-message-user__WsuiB">
            <div class="home_chat-message-container__plj_e">
                <div class="home_chat-message-avatar__611lI">
                    <div class="user-avatar">
                        <img src="${avatarUrl}" alt="smiley" class="__EmojiPicker__ epr-emoji-img" loading="eager">
                    </div>
                </div>
                <div class="home_chat-message-item__hDEOq">
                    <div class="markdown-body">
                        <p>${messageContent}</p>
                    </div>
                </div>
                ${showLoading ? loadingDiv : ''}
            </div>
        </div>
    `;

        chatContent.append(userMsg);
    }


</script>
</body>
</html>